<template>
	<div>
	    <div class="m-evaluate-count">
	    	<div class="m-evaluate-count-cell" :class="{active: params.mood == ''}" @click="handleChangeTab('')">
	    		<p>全部评论</p>
	    		<p>{{statistics.all}}</p>
	    	</div>
	    	<div class="m-evaluate-count-cell" :class="{active: params.mood == 'positive'}" @click="handleChangeTab('positive')">
	    		<p>好评</p>
	    		<p>{{statistics.positive}}</p>
	    	</div>
	    	<div class="m-evaluate-count-cell" :class="{active: params.mood == 'neutral'}" @click="handleChangeTab('neutral')">
	    		<p>中评</p>
	    		<p>{{statistics.neutral}}</p>
	    	</div>
	    	<div class="m-evaluate-count-cell" :class="{active: params.mood == 'negative'}" @click="handleChangeTab('negative')">
	    		<p>差评</p>
	    		<p>{{statistics.negative}}</p>
	    	</div>
	    	<div class="m-evaluate-count-cell">
	    		<p>好评率</p>
	    		<p>{{statistics.positive_rate}} %</p>
	    	</div>
	    </div>
	    <SuperTable
	    	ref="table"
	    	path="API_GOODS_COMMENT_LISTS"
	    	:columns="columns"
	    	:params="params"
	    	@on-loaded="switchLoading = false"
	    	@on-selection-change="handleChangeSelection"
	    >
	    	<div slot="page-left">
	    		<Button @click="handleBatchDelete">删除</Button>
	    		<Button @click="handleBatchShield">批量禁止显示</Button>
	    	</div>
	    	
	    	<div class="ui-table-cell ui-flex" slot-scope="{ row }" slot="goods">
	    		<ImageCell :src="'https://xzcustomer.cdn.bcebos.com/' + row.sku.thumb"></ImageCell>
	            <div class="ui-flex-full" style="margin-left: 10px;">
	            	<p class="ui-ellipsis2">{{ row.sku.sku_name }}</p>
	            	<p class="ui-ellipsis ui-text-primary">{{ handleGetSpecTexts(row.sku.spec) }}</p>
	            </div>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="score">
	    		<p class="ui-table-cell-line">评分：{{ row.mood_text }}</p>
	            <p class="ui-table-cell-line">时间：{{ row.create_time }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="status">
        		<p class="ui-table-cell-line">回复：{{ row.reply_time ? '已回复' : '未回复'}}</p>
            	<p class="ui-table-cell-line">状态：{{ row.is_shield == 1 ? '显示' : '隐藏' }}</p>
	        </div>
	        <div slot-scope="{ row }" slot="action">
	        	<Button type="warning" size="small" @click="handleShowModal(row)">查看评论</Button>
	        	<Button type="primary" size="small" @click="handleShield(row.id,row.is_shield)">{{ row.is_shield == 0 ? '允许显示' : '禁止显示' }}</Button>
	        	<Poptip title="是否确认删除此评价？" :width="190" placement="left" confirm transfer style="text-align: center;" @on-ok="handleDelete(row.id)">
	        		<Button type="error" size="small">删除</Button>
	        	</Poptip>
	        </div>
	    </SuperTable>
	    
	    <DrawerForm v-model="showModal" title="评论内容" :width="540">
	    	<div class="dg-consult-content">
	    		<p>{{ currentItem.content }}</p>
	    	</div>
	    	<ImageCells :value="imgs" :preview="true"></ImageCells>
	    	<div class="ui-divider"></div>
	    	<div v-if="currentItem.reply_time" class="dg-reply-content">
	    		<p style="margin-bottom: 5px;">回复内容：</p>
	    		<p>{{ currentItem.reply_content }}</p>
	    	</div>
	    	<template v-else>
	    		<p style="margin-bottom: 5px;">回复评论：</p>
	    		<Input type="textarea" v-model="replyContent" :rows="5" placeholder="请输入回复内容" />
	    	</template>
	    	<div slot="footer">
	    		<Button @click="showModal = false">{{ currentItem.reply_time ? '关闭' : '取消'}}</Button>
            	<Button v-if="!currentItem.reply_time" type="primary" style="margin-left: 8px" @click="handleSubmit">确认回复</Button>
	    	</div>
	    </DrawerForm>
	    
	    <LoadingMask v-if="switchLoading"></LoadingMask>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import SuperTable from '@/components/SuperTable.vue';
import LoadingMask from '@/components/LoadingMask.vue';
import ImageCells from '@/components/ImageCell/cells.vue';
import ImageCell from '@/components/ImageCell/index.vue';
import DrawerForm from '@/components/DrawerForm.vue';
export default {
	name: 'goodsList',
	components: {
		SuperTable,
		ImageCell,
		ImageCells,
		LoadingMask,
		DrawerForm
	},
	data() {
		return {
			ids: [],
			currentItem: {
				sku: {}
			},
			replyContent: '',
			switchLoading: false,
			showModal: false,
			statistics: {
				all: 0,
				positive: 0,
				neutral: 0,
				negative: 0,
				positive_rate: '0.00'
			},
			params: {
				mood: '',
				keywords: '',
				page: 1,
				limit: 10,
				relations: ['spu', 'sku']
			},
			columns: [
				{
                    type: 'selection',
                    width: 54,
                    align: 'center'
                },
                {
                    title: '评论商品',
                    slot: 'goods',
                    minWidth: 460
                },
                {
                    title: '评分&评论时间',
                    slot: 'score',
                    minWidth: 200
                },
                {
                    title: '状态',
                    slot: 'status',
                    minWidth: 160
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: "center",
                    width: 215
                },
			],
			imgs: ['123.jpg', '1233.png']
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			Util.ajax.post(this.API['API_GOODS_COMMENT_STATISTICS'], {}).then((res) => {
				this.statistics = res;
			}).catch(() => {
				
			})
		},
		// 显示评价内容
		handleShowModal(item) {
			if(typeof item.imgs == 'string') {
				if(item.imgs) {
					item.imgs = item.imgs.split(',');
				}else{
					item.imgs = [];
				}
			}
			this.currentItem = item;
			this.replyContent = '';
			this.showModal = true;
		},
		// 获取规格文本
		handleGetSpecTexts(arr) {
			if(!arr) return '';
			let results = arr.map(item => {
				return item.name +':'+ item.value;
			})
			return results.join(',')
		},
		// 切换选项卡
		handleChangeTab(mood) {
			if(this.params.mood == mood) return false;
			this.switchLoading = true;
			this.params.mood = mood;
		},
		// 搜索
		handleSearch() {
			
		},
		// 隐藏与显示
		handleShield(id,is_shield) {
			let shield = (is_shield == 1) ? 0 : 1;
			Util.ajax.post(this.API['API_GOODS_COMMENT_SHIELD'], {ids:[id], is_shield:shield}).then((res) => {
				this.$Message.success('操作成功');
				this.$refs.table.init();
			}).catch(() => {

			})
		},
		// 删除
		handleDelete(id) {
			Util.ajax.post(this.API['API_GOODS_COMMENT_DESTORY'], {ids: [id]}).then((res) => {
				this.$Message.success('删除成功');
				this.$refs.table.init();
			}).catch(() => {

			})
		},
		// 回复
		handleSubmit() {
			if(this.replyContent == "") {
				this.$Message.error("请填写回复内容");
				return false;
			}
			Util.ajax.post(this.API['API_GOODS_COMMENT_REPLY'], {id: this.currentItem.id, content: this.replyContent}).then(res => {
				this.$Message.success("回复成功");
				this.showModal = false;
				this.$refs.table.init();
			}).catch(() => {
				
			})
		},
		// 表格选中触发事件
		handleChangeSelection(selection) {
			this.ids = selection.map(item => {
				return item.id;
			})
		},
		// 批量禁止显示
		handleBatchShield() {
			if(this.ids.length == 0) {
				this.$Message.error("请至少选择一条评价");
				return false;
			}
			this.$Modal.confirm({
                title: '操作确认',
                content: '<p>是否确认将所选评价隐藏？</p>',
                onOk: () => {
                    Util.ajax.post(this.API['API_GOODS_COMMENT_SHIELD'], {ids: this.ids, is_shield: 0}).then(res => {
						this.$Message.success("批量操作成功");
						this.$refs.table.init();
					}).catch(() => {
						
					})
                }
            });
		},
		//批量删除
		handleBatchDelete() {
			if(this.ids.length == 0) {
				this.$Message.error("请至少选择一条评价");
				return false;
			}
			this.$Modal.confirm({
                title: '操作确认',
                content: '<p>是否确认将所选评价删除？</p>',
                onOk: () => {
                    Util.ajax.post(this.API['API_GOODS_COMMENT_DESTORY'], {ids: this.ids}).then(res => {
						this.$Message.success("批量操作成功");
						this.$refs.table.init();
					}).catch(() => {
						
					})
                }
            });
		}
	}
}
</script>

<style lang="less">
.m-evaluate-count {
	margin-bottom: 20px;
	display: flex;
	width: 100%;
	&-cell {
		flex: 1;
		margin-left: 20px;
		padding: 20px;
	    height: 78px;
	    font-size: 14px;
	    color: #fff;
	    border-radius: 5px;
	    background: #515b6d;
	    transition: all 0.4s ease;
	    cursor: pointer;
	}
	&-cell:first-child {
		margin-left: 0;
	}
	&-cell.active {
		background-color: #37b8f2;
	}
	&-cell:last-child {
		background-color: #fd9827;
		cursor: default;
	}
}
.dg-consult-goods {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px dashed #dedede;
}
.dg-consult-content {
	margin-bottom: 16px;
	line-height: 20px;
	font-size: 13px;
	color: #000;
}
.dg-consult-content .label {
	color: #999;
	font-size: 12px;
}
.dg-reply-content {
	margin-top: 15px;
	color: #666;
}
</style>